<template>
	<view class="">
		<!-- 搜索框在小程序中 -->
		<!-- #ifdef MP -->
		<search-input></search-input>
		<!-- #endif -->

		<!-- 轮播图 -->
		<mxg-banner></mxg-banner>

		<!-- 分类 -->
		<category-box></category-box>

		<view class="list-container">
			<!-- 热门推荐 -->
			<swiper-course name="热门推荐" word="HOT"></swiper-course>
			<swiper-course name="免费精选" word="FREE"></swiper-course>
			<scroll-course name="近期上新" word="NEW"></scroll-course>
			<list-course name="付费精品" word="NICE"></list-course>
		</view>
	</view>
</template>

<script>
	import searchInput from "@/components/common/search-input.vue";
	import mxgBanner from "@/components/common/mxg-banner.vue"
	import categoryBox from "./components/category-box.vue"
	import swiperCourse from "./components/swiper-course.vue"
	import scrollCourse from "./components/scroll-course.vue"
	import listCourse from "./components/list-course.vue"

	export default {
		components: {
			searchInput,
			mxgBanner,
			categoryBox,
			swiperCourse,
			scrollCourse,
			listCourse
		},
		onLoad() {
			// 只在APP中有
			// #ifdef APP-PLUS
			this.placeholderData()
			// #endif
		},
		//原生导航栏的点击事件
		onNavigationBarButtonTap(e) {
			// console.log('e',e)
			// 允许从相机和相册扫码
			uni.scanCode({
				success: (res) => {
					// console.log('条码类型：' + res.scanType);
					// console.log('条码内容：' + res.result);
					uni.navigateTo({
						url: `/pages/public/web-view?url=${res.result}`
						// url:'/pages/article/article'
					})
				},
				fail: (error) => {
					console.log(error)
				}
			});
		},

		methods: {
			// 搜索框滚动
			placeholderData() {
				// 获取当前页面实例
				let webview = this.$scope.$getAppWebview();
				// 滚动数组
				let arr = ["APP · 微信小程序", "Java · SprinBoot", "SpringCloud · SpringSecurity", "Vue · React"];

				// 实现搜索框滚动
				// 首先赋数组第一个值
				let i = 0;
				webview.setStyle({
					'titleNView': {
						"searchInput": {
							"placeholder": arr[i]
						}
					}
				})

				let len = arr.length;

				// 开始循环滚动
				setInterval(() => {
					i = i < len ? ++i : i = 0;
					webview.setStyle({
						'titleNView': {
							"searchInput": {
								"placeholder": arr[i]
							}
						}
					})
				}, 3000)
			}
		},

	}
</script>

<style>
	.list-container {
		padding: 0 30rpx;
	}
</style>
